<div ng-controller="DemoCtrl" ng-cloak>
  <md-toolbar class="md-accent">
    <header layout="row" layout-align="start center">
      <span>
        <md-button class="md-icon-button md-primary" aria-label="Settings" disabled>
          <md-icon md-svg-icon="img/icons/menu.svg"></md-icon>
        </md-button>
        <label style="vertical-align: middle; margin-right: 24px;">ACME</label>
      </span>
      <md-input-container md-no-float>
        <md-icon md-svg-src="img/icons/ic_person_24px.svg"></md-icon>
        <input placeholder="primary" aria-label="primary" />
      </md-input-container>
      <md-input-container class="md-accent" md-no-float>
        <md-icon md-svg-src="img/icons/ic_person_24px.svg"></md-icon>
        <input placeholder="accent" aria-label="accent" />
      </md-input-container>
      <md-input-container class="md-warn" md-no-float>
        <md-icon md-svg-src="img/icons/ic_person_24px.svg"></md-icon>
        <input placeholder="warn" aria-label="warn" />
      </md-input-container>
    </header>
  </md-toolbar>
  <md-toolbar class="md-primary">
    <header layout="row" layout-align="start center">
      <span>
        <md-button class="md-icon-button md-primary" aria-label="Settings" disabled>
          <md-icon md-svg-icon="img/icons/menu.svg"></md-icon>
        </md-button>
        <label style="vertical-align: middle; margin-right: 24px;">ACME</label>
      </span>
      <md-input-container md-no-float>
        <md-icon md-svg-src="img/icons/ic_person_24px.svg"></md-icon>
        <input placeholder="primary" aria-label="primary" />
      </md-input-container>
      <md-input-container class="md-accent" md-no-float>
        <md-icon md-svg-src="img/icons/ic_person_24px.svg"></md-icon>
        <input placeholder="accent" aria-label="accent" />
      </md-input-container>
      <md-input-container class="md-warn" md-no-float>
        <md-icon md-svg-src="img/icons/ic_person_24px.svg"></md-icon>
        <input placeholder="warn" aria-label="warn" />
      </md-input-container>
    </header>
  </md-toolbar>
  <md-toolbar class="md-warn">
    <header layout="row" layout-align="start center">
      <span>
        <md-button class="md-icon-button md-primary" aria-label="Settings" disabled>
          <md-icon md-svg-icon="img/icons/menu.svg"></md-icon>
        </md-button>
        <label style="vertical-align: middle; margin-right: 24px;">ACME</label>
      </span>
      <md-input-container md-no-float>
        <md-icon md-svg-src="img/icons/ic_person_24px.svg"></md-icon>
        <input placeholder="primary" aria-label="primary" />
      </md-input-container>
      <md-input-container class="md-accent" md-no-float>
        <md-icon md-svg-src="img/icons/ic_person_24px.svg"></md-icon>
        <input placeholder="accent" aria-label="accent" />
      </md-input-container>
      <md-input-container class="md-warn" md-no-float>
        <md-icon md-svg-src="img/icons/ic_person_24px.svg"></md-icon>
        <input placeholder="warn" aria-label="warn" />
      </md-input-container>
    </header>
  </md-toolbar>
  <md-content class="md-margin">
    <md-input-container md-no-float>
      <input placeholder="primary no float" aria-label="primary no float" />
    </md-input-container>
    <md-input-container>
      <input placeholder="primary" aria-label="primary" />
    </md-input-container>
    <md-input-container class="md-accent">
      <input placeholder="accent" aria-label="accent" />
    </md-input-container>
  </md-content>
</div>
